<template>
	<div id="taskDetail1">
		<div id="header">
			<img src="../../static/img/return.png" @click="Return"/>
			<p>试用详情</p>
		</div>
		<!---------试用商品信息------------>
		<div class="task">
			<div class="order_num">
				订单号：{{taskObj.id}}
			</div>
			<div class="task_information">
				<img :src="taskObj.task.goodsImage"/>
				<div class="task_text">
					<div class="task_title">
						<img src="../../static/img/tb.png"/>
						<p>{{taskObj.task.taskName}}</p>
					</div>
					<p class="house_name">店铺名称：{{encryption(taskObj.houseName)}}</p>
					<p class="price">价格：¥{{returnFloat(taskObj.task.price)}}</p>
					<p class="goods_notice">规格：{{taskObj.task.goodsNotice}}</p>
					<p class="qq"><img src="../../static/img/myActivity-05.png"/>商家QQ：{{taskObj.task.qq}}</p>
				</div>
			</div>
		</div>
		<!---------任务步骤---------->
		<div class="task_step">
			<p>加入购物车</p>
			<div>
				<p><img src="../../static/img/myActivity-06.png"/>{{getDate(taskObj.task.createtime)}}</p>
				<input :class="step>=1?'step_active':''" type="button" :value="step>=1?'已完成':'未完成'" />
			</div>
		</div>
		<div class="task_step">
			<p>收藏/关注宝贝和店铺</p>
			<div>
				<p><img src="../../static/img/myActivity-06.png"/>{{getDate(taskObj.followTime)}}</p>
				<input @click="open(2)" :class="step>=2?'step_active':''" type="button" :value="step>=2?'查看':'未完成'" />
			</div>
		</div>
		<div class="task_step" v-if="taskObj.task.askStatus == 1">
			<p>手淘问大家</p>
			<div>
				<p><img src="../../static/img/myActivity-06.png"/>{{getDate(taskObj.compareTime)}}</p>
				<input @click="open(3)" :class="step>=3?'step_active':''" type="button" :value="step>=3?'查看':'未完成'" />
			</div>
		</div>
		<div class="task_step">
			<p>货比三家</p>
			<div>
				<p><img src="../../static/img/myActivity-06.png"/>{{getDate(taskObj.compareTime)}}</p>
				<input @click="open(4)" :class="step>=4?'step_active':''" type="button" :value="step>=4?'查看':'未完成'" />
			</div>
		</div>
		<div class="task_step" v-if="taskObj.task.chatStatus == 1">
			<p>旺旺/咚咚聊天</p>
			<div>
				<p><img src="../../static/img/myActivity-06.png"/>{{getDate(taskObj.compareTime)}}</p>
				<input @click="open(5)" :class="step>=5?'step_active':''" type="button" :value="step>=5?'查看':'未完成'" />
			</div>
		</div>
		<div class="task_step" v-if="taskObj.deepStatus == 1">
			<p>浏览店铺其他宝贝</p>
			<div>
				<p><img src="../../static/img/myActivity-06.png"/>{{getDate(taskObj.compareTime)}}</p>
				<input @click="open(6)" :class="step>=6?'step_active':''" type="button" :value="step>=6?'查看':'未完成'" />
			</div>
		</div>
		<div class="task_step" v-if="taskObj.task.returnBabyStatus == 1">
			<p>回访宝贝</p>
			<div>
				<p><img src="../../static/img/myActivity-06.png"/>{{getDate(taskObj.compareTime)}}</p>
				<input @click="open(7)" :class="step>=7?'step_active':''" type="button" :value="step>=7?'查看':'未完成'" />
			</div>
		</div>
		<div class="task_step">
			<p>订单信息</p>
			<div>
				<p><img src="../../static/img/myActivity-06.png"/>{{getDate(taskObj.payTime)}}</p>
				<input @click="open(8)" :class="step>=8?'step_active':''" type="button" :value="step>=8?'查看':'未完成'" />
			</div>
		</div>
		<div @click="close" v-show="detailShow" id="step_detail">
			<div @click.stop="" class="step_detail">
				<!----------收藏/关注------------>
				<div v-if="stepDetail == 2" class="collection">
					<div class="collection_img">
						<div>
							<p>收藏/关注宝贝</p>
							<img :src="taskObj.collectionGoodsImg"/>
						</div>
						<div>
							<p>收藏/关注店铺</p>
							<img :src="taskObj.followHouseImg"/>
						</div>
					</div>
					<!--<input @click="close" id="preservation" type="button" value="保存" />-->
				</div>
				<!------------问大家-------------->
				<div v-else-if="stepDetail == 3" class="talk">
					<div class="talk_img">
						<p>问大家截图</p>
						<img :src="taskObj.askImg"/>
					</div>
					<!--<input @click="close" id="preservation" type="button" value="保存" />-->
				</div>
				<!------------货比三家-------------->
				<div v-else-if="stepDetail == 4" class="ratio">
					<div class="collection_img">
						<div>
							<p>货比图1</p>
							<img :src="taskObj.compareTao1"/>
						</div>
						<div>
							<p>货比图2</p>
							<img :src="taskObj.compareTao2"/>
						</div>
						<div>
							<p>货比图3</p>
							<img :src="taskObj.compareTao3"/>
						</div>
					</div>
					<!--<div class="ratio_item">
						<p>货比淘口令1：</p>
						<input type="text" v-model="taskObj.compareTao1" />
					</div>
					<div class="ratio_item">
						<p>货比淘口令2：</p>
						<input type="text" v-model="taskObj.compareTao2" />
					</div>
					<div class="ratio_item">
						<p>货比淘口令3：</p>
						<input type="text" v-model="taskObj.compareTao3" />
					</div>-->
					<!--<input @click="close" id="preservation" type="button" value="保存" />-->
				</div>
				<!------------聊天-------------->
				<div v-else-if="stepDetail == 5" class="talk">
					<div class="talk_img">
						<p>旺旺/咚咚聊天截图</p>
						<img :src="taskObj.chatImg"/>
					</div>
					<!--<input @click="close" id="preservation" type="button" value="保存" />-->
				</div>
				<!------------浏览店铺其他宝贝-------------->
				<div v-else-if="stepDetail == 6" class="ratio">
					<div class="collection_img">
						<div>
							<p>其他宝贝1</p>
							<img :src="taskObj.lookOthergoods1"/>
						</div>
						<div>
							<p>其他宝贝2</p>
							<img :src="taskObj.lookOthergoods2"/>
						</div>
						<div>
							<p>其他宝贝3</p>
							<img :src="taskObj.lookOthergoods3"/>
						</div>
					</div>
					<!--<div class="ratio_item">
						<p>宝贝淘口令1：</p>
						<input type="text" v-model="taskObj.lookOthergoods1" />
					</div>
					<div class="ratio_item">
						<p>宝贝淘口令2：</p>
						<input type="text" v-model="taskObj.lookOthergoods2" />
					</div>
					<div class="ratio_item">
						<p>宝贝淘口令3：</p>
						<input type="text" v-model="taskObj.lookOthergoods3" />
					</div>-->
					<!--<input @click="close" id="preservation" type="button" value="保存" />-->
				</div>
				<!------------回访宝贝-------------->
				<div v-else-if="stepDetail == 7" class="talk">
					<div class="talk_img">
						<p>回访宝贝截图</p>
						<img :src="taskObj.comebackImg"/>
					</div>
					<!--<input @click="close" id="preservation" type="button" value="保存" />-->
				</div>
				<!------------订单信息-------------->
				<div v-else-if="stepDetail == 8" class="order_detail">
					<div class="order_num">
						<p>订单号：</p>
						<input type="text" v-model="taskObj.orderNum" />
					</div>
					<div class="order_img">
						<p>订单截图：</p>
						<div>
							<img :src="taskObj.orderImg"/>
						</div>
						<input @change="onFileChange" type="file" id="file" accept="image/*" />
					</div>
					<input v-if="taskObj.operaStatus != 21" @click="updateOrder" id="preservation" type="button" value="修改" />
					<input v-else id="finish" type="button" value="修改" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default{
	name: 'taskDetail1',
	data:function(){
		return{
			step: 8,//1 已加入购物车  2 已收藏/关注    3 手淘问大家   4 已货比三家  5  聊天   6 浏览店铺其他宝贝 7 回访宝贝   8订单信息
			stepDetail: 2,//详情显示  2 已收藏/关注    3 手淘问大家   4 已货比三家  5  聊天   6 浏览店铺其他宝贝 7 回访宝贝   8订单信息
			taskId: '',	//活动id
			taskObj:{
				orderNum: '1552207485652',//淘宝或京东订单号
				houseName: '电话肌肤老化',//店铺名称
				auditTime: 1514779200000,//中奖时间
				followTime: 1514779200000,//收藏时间
				compareTime: 1514779200000,//货比三家时间
				lookTime: 1514779200000,//浏览店铺其他宝贝时间
				payTime: 1514779200000,//下单时间
				reportTime: 1514779200000,//提交报告时间
				commentTime: 1514779200000,//追评时间
				collectionGoodsImg: '/static/img/remove-05.jpg',//收藏/关注宝贝截图
				followHouseImg: '/static/img/remove-05.jpg',//收藏/关注店铺截图
				compareTao1: 'djhsdgh5434',//货比淘口令1
				compareTao2: 'djhsdgh5434',//货比淘口令2
				compareTao3: 'djhsdgh5434',//货比淘口令3
				lookOthergoods1: 'hgshdl14542',//店铺其他宝贝淘口令1
				lookOthergoods2: 'hgshdl14542',//店铺其他宝贝淘口令2
				lookOthergoods3: 'hgshdl14542',//店铺其他宝贝淘口令3
				chatImg: '/static/img/remove-05.jpg',//聊天截图
				askImg: '/static/img/remove-05.jpg',//问大家截图
				comebackImg: '/static/img/remove-05.jpg',//回访宝贝截图
				orderNum: '24164313543234',//订单号
				orderImg: '/static/img/remove-05.jpg',//订单截图
				task:{
					skuImage:'../../static/img/remove-03.png',//商品主图
					createTime: 1514779200000,//加入购物车时间
					goodsNotice: '商品规格',//商品规格
					price: 69,//价格
					qq:'154125231',//商家qq
					taskName:'男士浅色宽松bf风牛仔外套',//活动名称
				}
			},
			detailShow: false,//详情弹窗开关
			url:'/user/taskSchedule',
			detailUrl: '/user/taskSchedule/selectMyTaskDetail'
		}
		
	},
	methods:{
		//---------关闭弹窗----------
		close:function(){
			this.detailShow = false;
		},
		//----------打开-------------
		open:function(n){
			if(this.step >= n){
				this.detailShow = true;
				this.stepDetail = n;
			}else{
				
			}
		},
		//----------请求---------
		Request:function(){
			var _this = this;
			let postData = _this.$qs.stringify({
	        	taskId: _this.taskId
	        });
			_this.$axios.post(this.detailUrl, postData).then(function(res){
			    var data = res.data;
			    if(data.message == "succ"){
			    	_this.taskObj = data.result;
			    	var status = data.result.operaStatus;
			    	if(_this.$route.query.type == 2){
			    		if((status >= 0 && status <= 2) || status == 11){
				    		_this.step = 1;
				    	}else if((status >= 3 && status <= 4) || status == 12){
				    		_this.step = 3;
				    	}else if((status >= 5 && status <= 6) || status == 13){
				    		_this.step = 7;
				    	}else if(status >= 14){
				    		_this.step = 8;
				    	}else if(status == 10){
				    		if(data.result.payTime != undefined){
				    			_this.step = 8;
				    		}else if(data.result.compareTime != undefined){
				    			_this.step = 7;
				    		}else if(data.result.followTime != undefined){
				    			_this.step = 3;
				    		}else{
				    			_this.step = 1;
				    		}
				    	}
			    	}else{
			    		if((status >= 0 && status <= 3) || status == 11){
			    		_this.step = 1;
				    	}else if((status >= 4 && status <= 5) || status == 12){
				    		_this.step = 3;
				    	}else if((status >= 6 && status <= 7) || status == 13){
				    		_this.step = 7;
				    	}else if(status >= 14){
				    		_this.step = 8;
				    	}else if(status == 10){
				    		if(data.result.payTime != undefined){
				    			_this.step = 8;
				    		}else if(data.result.compareTime != undefined){
				    			_this.step = 7;
				    		}else if(data.result.followTime != undefined){
				    			_this.step = 3;
				    		}else{
				    			_this.step = 1;
				    		}
				    	}
			    	}
			    }
			}).catch(function (error) {
			    console.log(error);
			});
		},
		//----------修改订单信息---------
		updateOrder:function(){
			this.close();
			var _this = this;
			let postData = _this.$qs.stringify({
	        	taskId: _this.taskId,
	        	orderNum: _this.taskObj.orderNum,
	        	orderImg: _this.taskObj.orderImg
	        });
			_this.$axios.post(this.url+'/updateOrder',postData).then(function(res){
			    var data = res.data;
			    if(data.message == "succ"){
			    	_this.$alert("修改成功");
			    }
			}).catch(function (error) {
			    console.log(error);
			});
		},
		//--------图片压缩上传-----------
		onFileChange (e) {
	        //获取图片文件
	        var files = e.target.files || e.dataTransfer.files
	        if (!files.length) return
	        this.createImage(files, e)
	    },
	    createImage (file, e) {
	        this.imgUrl = ''
	        lrz(file[0], {width: 480}).then((rst) => {
	            this.taskObj.orderImg = rst.base64;
	            $(".order_img").find("img").attr("src", rst.base64);
	        }).always(() => {
	            //每次压缩完之后要将input内容清空，不然会出现传出去的内容不对的bug
	            e.target.value = null
	        })
	    },
		//--------加密---------
		encryption:function(str){
			if(str == undefined){
				return;
			}
			var str1 = str.split('');
			var str2 = '';
			$.each(str1,function(i){
				if(i%2 != 0){
					str2 += '*';
				}else{
					str2 += str1[i];
				}
			})
			return str2;
		},
		//--------小数点后两位不够补零---------------
		returnFloat:function(value){
			var value=Math.round(parseFloat(value)*100)/100;
			var xsd=value.toString().split(".");
			if(xsd.length==1){
				value=value.toString()+".00";
				return value;
			}
			if(xsd.length>1){
				if(xsd[1].length<2){
					value=value.toString()+"0";
				}
				return value;
			}
		},
		//--------日期转换-----------
		getDate: function(str){  
			if(str == ""||str ==null){
				return "";
			}
		    var oDate = new Date(str),  
		    oYear = oDate.getFullYear(),  
		    oMonth = oDate.getMonth()+1,  
		    oDay = oDate.getDate(),  
		    oHour = oDate.getHours(),  
		    oMin = oDate.getMinutes(),  
		    oSen = oDate.getSeconds(),  
		    oTime = oYear +'-'+ this.getzf(oMonth) +'-'+ this.getzf(oDay) +' '+ this.getzf(oHour) +':'+ this.getzf(oMin) +':'+this.getzf(oSen);//最后拼接时间  
		    return oTime;  
		},
		//补0操作  
		getzf:function(num){  
		    if(parseInt(num) < 10){  
		        num = '0'+num;  
		    }  
		    return num;  
		},
		//-------返回上一页-------
		Return: function(){
			this.$router.go(-1);
		},
	},
	created:function(){
		var _this = this;
		if(this.$route.query.taskId){
			this.taskId = this.$route.query.taskId;
		}else{
			this.$alert("路径异常", function(){
				_this.$router.go(-1);
			});
		}
		if(this.$route.query.type){
			if(this.$route.query.type == 2){
				this.url = '/user/auctionSchedule';
				this.detailUrl = '/user/auctionSchedule/selectMyAuctionDetail';
			}
		}else{
			this.$alert("路径异常", function(){
				_this.$router.go(-1);
			});
		}
		this.Request();
	}
}
</script>

<style scoped>
#taskDetail1{
	padding-top: 4.5rem;
	box-sizing: border-box;
}
#header{
	width: 100%;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #EEEEEE;
	font-size: 1.6rem;
	color: #4F4F4F;
	box-sizing: border-box;
}
#header img{
	height: 2rem;
	display: block;
	position: absolute;
	top: 1rem;
	left: 2rem;
}
/*--------任务信息----------*/
.task{
	background-color: #fff;
}
.order_num{
	padding: 1rem;
	box-sizing: border-box;
	border-bottom: 1px solid #EEEEEE;
	color: #787878;
}
.task_information{
	display: flex;
	align-items: center;
	padding: 1rem 1.5rem;
	box-sizing: border-box;
}
.task_information>img{
	width: 11rem;
	height: 11rem;
	display: block;
	margin-right: 0.5rem;
}
.task_text{
	width: calc(100% - 11.5rem);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.task_text>p{
	padding: 0.3rem 0;
	border-top: 1px solid #EEEEEE;
	font-size: 1.2rem;
}
.task_title{
	padding-bottom: 0.3rem;
}
.task_title img{
	height: 1.2rem;
	display: inline-block;
	margin-right: 0.2rem;
}
.task_title p{
	width: calc(100% - 2rem);
	display: inline-block;
	color: #4F4F4F;
	font-size: 1.4rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.house_name,.qq{
	color: #4F4F4F;
}
.price,.goods_notice{
	color: #A9A9A9;
}
.qq img{
	height: 1.2rem;
	display: inline-block;
	margin-right: 0.2rem;
}
/*----------任务步骤----------*/
.task_step{
	background-color: #fff;
	margin-top: 1rem;
}
.task_step>p{
	font-size: 1.2rem;
	color: #4F4F4F;
	height: 3.6rem;
	line-height: 3.6rem;
	padding-left: 1.5rem;
	border-bottom: 1px solid #EEEEEE;
	box-sizing: border-box;
}
.task_step div{
	padding: 0 1.5rem;
	box-sizing: border-box;
	color: #A9A9A9;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 3.6rem;
}
.task_step div p{
	display: flex;
	align-items: center;
}
.task_step div p img{
	height: 1.2rem;
	display: block;
	margin-right: 0.2rem;
}
.task_step div input{
	border: 1px solid #CCCCCC;
	border-radius: 3px;
	background-color: #fff;
	color: #CCCCCC;
	height: 2rem;
	width: 6rem;
}
.task_step div input.step_active{
	border: 1px solid #FF6565;
	color: #FF6565;
}
/*-------------信息查看----------------*/
#step_detail{
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 11;
	background-color: rgba(0,0,0,0.7);
}
.step_detail{
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #fff;
	padding: 2rem;
	box-sizing: border-box;
}
/*--------收藏/关注------------*/
.collection_img{
	display: flex;
	box-sizing: border-box;
	justify-content: space-between;
}
.collection_img div{
	width: 45%;
}
.collection_img div p{
	font-size: 1.2rem;
	color: #4F4F4F;
	text-align: center;
}
.collection_img div img{
	width: 100%;
	display: block;
	margin-top: 1rem;
}
/*--------货比三家------------*/
.ratio{
	width: 100%;
}
.ratio .collection_img div{
	width: 30%;
}
.ratio_item{
	width: 90%;
	display: flex;
	align-items: center;
	margin: 0 auto;
	margin-bottom: 1rem;
}
.ratio_item p{
	font-size: 1.2rem;
	color: #4F4F4F;
	white-space: nowrap;
	margin-right: 0.5rem;
}
.ratio_item input{
	width: 100%;
	border: 1px solid #EEEEEE;
	height: 3rem;
	padding-left: 1rem;
	box-sizing: border-box;
}
/*---------聊天----------*/
.talk_img{
	width: 45%;
	margin: 0 auto;
}
.talk_img p{
	color: #4F4F4F;
	font-size: 1.2rem;
	text-align: center;
	margin-bottom: 1rem
}
.talk_img img{
	width: 100%;
	display: block;
}
/*---------订单信息------------*/
.order_detail .order_num{
	display: flex;
	align-items: center;
	border: none;
}
.order_num p{
	white-space: nowrap;
	font-size: 1.2rem;
	color: #4F4F4F;
	margin-right: 0.5rem;
}
.order_num input{
	width: 100%;
	border: 1px solid #EEEEEE;
	height: 3rem;
	padding-left: 1rem;
	box-sizing: border-box;
}
.order_img{
	display: flex;
	position: relative;
}
.order_img p{
	white-space: nowrap;
	font-size: 1.2rem;
	color: #4F4F4F;
	margin-right: 0.5rem;
}
.order_img div{
	width: 45%;
}
.order_img img{
	width: 100%;
	display: block;
}
.order_img input{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}
/*---------保存按钮----------*/
#preservation{
	width: 100%;
	height: 3.6rem;
	display: block;
	margin: 0 auto;
	background-color: #FF6565;
	color: #FFFFFF;
	font-size: 1.4rem;
	border-radius: 3px;
	border: none;
	margin-top: 2rem;
}
#finish{
	width: 100%;
	height: 3.6rem;
	display: block;
	margin: 0 auto;
	background-color: #787878;
	color: #FFFFFF;
	font-size: 1.4rem;
	border-radius: 3px;
	border: none;
	margin-top: 2rem;
}
</style>
